<template>
  <div class="page">
    <div v-if="ifshow" class="page-top">
      <img src="../assets/登录页-2.jpg" width="100%" alt="" />
      <button class="qiehaun" @click="ifshow = !ifshow">登录</button>
    </div>

    <div v-if="!ifshow" class="page-bottom">
      <img src="../assets/登录页-1.jpg" width="100%" alt="" />
      <div class="page-bottom-div">
        <van-field v-model="value" label="账户" />
        <van-field v-model="password" type="password" label="密码" />
        <button @click="click" class="btn">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { GoLogin } from "../request/api";
export default {
  data() {
    return {
      ifshow: true,
      value: "",
      password: "",
    };
  },
  // "15183592517"
  created() {},
  methods: {
    click() {
      GoLogin({
        username: this.value,
        password: this.password,
      }).then((res) => {
        if(res.errCode==0){
        let token = res.data;
        localStorage.setItem("token", token);
        this.value=''
        this.password=''
        this.$router.push('/home')
        }
        

      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.page {
  width: 100%;
  height: 100vh;
  .page-top {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    .qiehaun {
      position: absolute;
      bottom: 37px;
      left: 115px;
      width: 138px;
      height: 42px;
      border: 0;
      background-color: #78c3e2;
      color: #fff;
      border-radius: 5px;
    }
  }
  .page-bottom {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .page-bottom-div {
      width: 100%;
      height: 50vh;
      position: absolute;
      bottom: 0;
      left: 0;
      padding-top: 35px;
      box-sizing: border-box;
      /deep/ .van-cell {
        background-color: #ffcc33;
        width: 250px;
        margin: 15px auto;
        border-radius: 20px;
        border: 1px solid #000;
        .van-field__label {
          width: auto;
          color: #000;
        }
      }
      .btn{
        width: 180px;
        height:40px;
        border: 1px solid #000;
        background-color: #4366fe;
        color: #fff;
        margin: 40px 100px 0;
        border-radius: 20px;
      }
    }
  }
}
</style>